<template>
  <div class="sitting">
	  <el-dialog
	    :title="nameTitle"
	    :visible.sync="dialogVisible"
	    width="48%"
	  	top="18px"
	    @close="handleClose"
	  >
	    <el-form
	      ref="supplierForm"
	      :model="form"
	      :rules="rules"
	      label-width="120px"
	      label-position="right"
	    >
	      <el-form-item label="供应商名称" prop="supplierName">
	        <el-input
			  size="mini"
	          v-model="form.supplierName"
	          placeholder="请输入供应商名称"
	          clearable
	        />
	      </el-form-item>
	  
	      <el-form-item label="联系人" prop="contact">
	        <el-input
			  size="mini"
	          v-model="form.contact"
	          placeholder="请输入联系人姓名"
	          clearable
	        />
	      </el-form-item>
	  
	      <el-form-item label="联系电话" prop="contactPhone">
	        <el-input
			  size="mini"
	          v-model="form.contactPhone"
	          placeholder="请输入联系电话"
	          clearable
	        />
	      </el-form-item>
	  
	      <el-form-item label="许可证号" prop="permitNumber">
	        <el-input
			  size="mini"
	          v-model="form.permitNumber"
	          placeholder="请输入许可证号"
	          clearable
	        />
	      </el-form-item>
	  
	      <el-form-item label="地址" prop="address">
	        <el-input
			  size="mini"
	          v-model="form.address"
	          placeholder="请输入详细地址"
	          clearable
	        />
	      </el-form-item>
	  
	      <el-form-item label="状态" prop="status">
	        <el-radio-group v-model="form.status">
	          <el-radio :label="1">启用</el-radio>
	          <el-radio :label="2">禁用</el-radio>
	        </el-radio-group>
	      </el-form-item>
	  
	      <el-form-item label="备注" prop="remark">
	        <el-input
			  size="mini"
	          v-model="form.remark"
	          type="textarea"
	          :rows="3"
	          placeholder="请输入备注信息"
	        />
	      </el-form-item>
	    </el-form>
	  
	    <div slot="footer" class="dialog-footer" v-if="addBtn == false">
	      <el-button size="mini" type="primary" @click="handleSubmit" :loading="loading">确 定</el-button>
	      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
	    </div>
		<div slot="footer" class="dialog-footer" v-if="editBtn == true">
		  <el-button size="mini" type="primary" @click="handleEditSubmit" :loading="loading">保存修改</el-button>
		  <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
		</div>
	  </el-dialog>
  </div>
</template>

<script>
// 接口
import { addSupplierEntity,SupplierDetails,editSupplierEntity }  from "@/api/supplier.js";
	
export default {
  name: 'SupplierAddDialog',
  inject: ['reload'], // 无痕刷新
  data() {
    // 自定义手机号验证规则
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入联系电话'));
      }
      const reg = /^1[3-9]\d{9}$/;
      if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号码'));
      } else {
        callback();
      }
    };

    return {
	  nameTitle:'新增供应商',
      dialogVisible: false,
      loading: false,
	  addBtn: false,
	  editBtn: false,
      form: {
        supplierName: '',
        contact: '',
        contactPhone: '',
        permitNumber: '',
        address: '',
        status: 1, // 默认启用
        remark: ''
      },
      rules: {
        supplierName: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        contact: [
          { required: false, message: '请输入联系人姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        contactPhone: [
          { required: false, validator: validatePhone, trigger: 'blur' }
        ],
        permitNumber: [
          { required: false, message: '请输入许可证号', trigger: 'blur' }
        ],
        address: [
          { required: false, message: '请输入详细地址', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 打开对话框
    async open(pamra) {
      this.dialogVisible = true;
      
	  if(pamra.nameTitle == '新增'){
		this.nameTitle = pamra.nameTitle;
		// 每次打开时重置表单
		this.$nextTick(() => {
		  if (this.$refs.supplierForm) {
		    this.$refs.supplierForm.resetFields();
		  }
		});
	  }else if (pamra.nameTitle == '修改'){
		this.nameTitle = pamra.nameTitle;
		this.addBtn = true;
		this.editBtn = true;
		let res = await SupplierDetails({ id:pamra.id });
		if(res.code === 200){
			// 遍历 res.data 的所有键名
			for (let key in res.data) {
			  // 检查键名是否在对象 A 中存在
			  if (this.form.hasOwnProperty(key)) {
				// 如果存在，将 B 中的值更新到 A 中
				this.form[key] = res.data[key];
			  }
			}
			// this.tableData = this.addForm.deptList
			this.form.id = pamra.id
		}
	  }else if (pamra.nameTitle == '查看'){
		this.nameTitle = pamra.nameTitle
		this.addBtn = true;
		this.editBtn = false;
		let res = await SupplierDetails({ id:pamra.id });
		if(res.code === 200){
			// 遍历 res.data 的所有键名
			for (let key in res.data) {
			  // 检查键名是否在对象 A 中存在
			  if (this.form.hasOwnProperty(key)) {
				// 如果存在，将 B 中的值更新到 A 中
				this.form[key] = res.data[key];
			  }
			}
			// this.tableData = this.addForm.deptList
			this.form.id = pamra.id
		}
	  }
    },
	// 修改提交
	handleEditSubmit(){
		this.$refs.supplierForm.validate(async(valid) => {
		  if (valid) {
		    this.loading = true;
		    // 这里替换为实际的API调用
			console.log(this.form,'ooooooooooooo');
			  let res = await editSupplierEntity(this.form);
		      if(res.code===200){
					this.$message.success(res.message);
					this.dialogVisible = false;
					this.$emit('success'); // 通知父组件新增成功;
					this.reload();
				}else{
					this.$message.error(error.message || '新增失败');
					this.loading = false;
				};
		  }
		});
	},
    // 提交表单
    handleSubmit() {
      this.$refs.supplierForm.validate(async(valid) => {
        if (valid) {
          this.loading = true;
          // 这里替换为实际的API调用
		  let res = await addSupplierEntity(this.form);
            if(res.code===200){
				this.$message.success(res.message);
				this.dialogVisible = false;
				this.$emit('success'); // 通知父组件新增成功;
				this.reload();
			}else{
				this.$message.error(error.message || '新增失败');
				this.loading = false;
			};
        }
      });
    },

    // 关闭对话框
    handleClose() {
      this.$refs.supplierForm.clearValidate();
    }
  }
};
</script>

<style lang="less" scoped>
.sitting{
	 // 穿透
	  /deep/ .el-dialog__header{
	  	padding: 4px 8px;
	  	background-color: #007bb0;
	  }
	  /deep/ .el-dialog__title{
	  	font-size: 12px;
	  	color: #fff;
	  }
	  /deep/ .el-dialog__headerbtn{
	  	top: 10px;
	  }
	  /deep/ .el-dialog__headerbtn .el-dialog__close:hover{
	  	color: firebrick;
	  }
	  /deep/ .el-dialog__headerbtn .el-dialog__close{
	  	color: #fff;
	  }
	  /deep/ .el-dropdown-menu__item{
	  	font-size: 12px;
	  }
	  /deep/ .el-dialog__body{
		  padding: 10px;
	  }
	  /deep/ .el-form-item__label{
	  	font-size: 12px;
	  }
}
/* 可以添加一些自定义样式 */
.el-input, .el-textarea {
  width: 80%;
  
}

.el-form-item {
  margin-bottom: 16px;
 
}
</style>